<template>
  <div class="spaceData">
    <!-- <div class="operation-panel">
      <el-card :body-style="{ padding: '20px 15px !important' }">
        <div class="operation-item" @click="openLayer">
          <div>
            <svg-icon icon-class="menu"></svg-icon>
          </div>
          <span>图层</span>
        </div>
        <div class="operation-item" @click="openDrawQuery">
          <div>
            <svg-icon icon-class="suitcase" style="transform: scale(1.3)"></svg-icon>
          </div>
          <span>圈选<br>查询</span>
        </div>
      </el-card>
    </div> -->
    <div class="new-layerLegendDiv">
      <p @click="openLayer">
        <template v-if="showHideLayerDivBool==false">
          <img title="打开图层选择" src="@/assets/map/image/newImage/layer-r.png">
          <span style="color:#3a385e;">图层</span>
        </template>
        <template v-else>
          <img title="关闭图层选择" src="@/assets/map/image/newImage/layer-r.png">
          <span style="color:#107ce5;">图层</span>
        </template>
      </p>
      <p class="new-layerLengendDiv-split"></p>
      <p @click="openDrawQuery">
        <template v-if="showHideLegendDivBool==false">
          <img title="关闭圈选选择" src="@/assets/map/image/tools-r.png" style="width:20px;height:20px;margin-left: 5px;">
          <span style="color:#3a385e;">圈选<br>查询</span>
        </template>
        <template v-else>
          <img title="关闭圈选选择" src="@/assets/map/image/tools-r.png" style="width:20px;height:20px;margin-left: 5px;">
          <span style="color:#107ce5;">圈选<br>查询</span>
        </template>
      </p>
      <p class="new-layerLengendDiv-split"></p>
      <p @click="openQuery">
        <template v-if="showHideQuery==false">
          <svg-icon icon-class="search" style="width:20px;height:20px;margin-left: 5px;"></svg-icon>
          <span style="color:#3a385e;">数据<br>查询</span>
        </template>
        <template v-else>
          <svg-icon icon-class="search" style="width:20px;height:20px;margin-left: 5px;" color="#107ce5"></svg-icon>
          <span style="color:#107ce5;">数据<br>查询</span>
        </template>
      </p>
    </div>
    <!-- 图层 -->
    <transition name="slide-fade">
      <div class="layer" v-if="isShowLayer">
        <el-form :model="queryRang" ref="rangeRef"
                 :rules="{ dates: [{ required: true, message: '请选择分类！', trigger: 'change' }] }">
          <el-card class="card-first" :body-style="{ padding: '0 !important' }">
            <el-form-item prop="dates" style="padding: 10px 20px 0">
              <el-checkbox-group v-model="oneCheck" @change="oneChange">
                <el-row>
                  <el-col :span="12" v-for="item in oneData" :key="item.dictItemCode">
                    <el-checkbox :label="item.dictItemCode">{{ item.dictItemName }}</el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </el-form-item>
            <el-divider border-style="dashed"></el-divider>
            <div style="padding: 0 20px 10px">
              <el-link type="primary" :underline="false" v-if="!isShowQueryRang"
                       @click="showQueryRangClick">展开查询范围</el-link>
              <el-link type="primary" :underline="false" v-else
                       @click="closeQueryRangClick">收起查询范围</el-link>
              <el-collapse-transition>
                <div v-if="isShowQueryRang" class="queryRang">
                  <el-form-item label="项目名称" prop="pmName">
                    <el-select v-model="queryRang.pmName" placeholder="请选择" clearable @change="getSubject">
                      <el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="专题名称" prop="smName">
                    <el-select v-model="queryRang.smName" placeholder="请选择" clearable>
                      <el-option v-for="item in subjectOptions" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                  <div style="text-align: center">
                    <el-button type="primary" @click="layerQuery">确定</el-button>
                  </div>
                </div>
              </el-collapse-transition>
            </div>
          </el-card>
          <transition name="slide-fade">
            <el-card class="card-second" v-if="oneCheck.length > 0">
              <el-scrollbar>
                <el-checkbox-group v-model="twoCheck" @change="twoChange">
                  <el-row v-for="(value, key) in twoData" :key="value" :id="key">
                    <el-col :span="12" v-for="item in value" :key="item.dictItemCode">
                      <el-checkbox :label="item.dictItemCode">{{ item.dictItemName }}</el-checkbox>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </el-scrollbar>
            </el-card>
          </transition>
        </el-form>
      </div>
    </transition>
    <!-- 圈选查询 -->
    <transition name="slide-fade">
      <!-- <div class="circle" v-if="isShowCircle"> -->
      <div class="circle">
        <!-- <el-button type="primary" @click="openCircleCard">数据查询</el-button> -->
        <transition name="slide-fade">
          <el-card class="card-circle" v-if="isShowCircleCard" :body-style="{ padding: '0 !important' }">
            <h3>查询条件</h3>
            <el-form :model="circleForm" ref="circleRef"
                     :rules="{ tableName: [{ required: true, message: '请选择数据类型！', trigger: 'change' }] }">
              <div class="circle-first-form">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="省" prop="provinceId">
                      <el-select v-model="circleForm.provinceId" placeholder="请选择省" @change="chooseProvince" clearable>
                        <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="市" prop="cityId">
                      <el-select v-model="circleForm.cityId" placeholder="请选择市" @change="chooseCity" clearable>
                        <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="区/县" prop="countyId">
                      <el-select v-model="circleForm.countyId" placeholder="请选择区/县" @change="chooseCounty" clearable>
                        <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="项目名称" prop="pmId">
                      <el-select v-model="circleForm.pmId" placeholder="请选择" clearable @change="getSubject">
                        <el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.id" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="专题名称" prop="smId">
                      <el-select v-model="circleForm.smId" placeholder="请选择" clearable>
                        <el-option v-for="item in subjectOptions" :key="item.id" :label="item.name" :value="item.id" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item prop="type">
                  <el-radio-group v-model="circleForm.type" @change="getOtherData">
                    <el-radio label="0">数据库结构查询</el-radio>
                    <el-radio label="1">点、面、线要素查询</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <el-divider border-style="dashed"></el-divider>
              <div class="circle-second-form">
                <el-form-item label="数据类型" prop="tableName">
                  <el-space>
                    <el-select v-model="circleForm.status" placeholder="请选择" clearable @change="otherTypeChange">
                      <el-option v-for="item in otherType" :key="item.dictItemId" :label="item.dictItemName"
                                 :value="item.dictItemCode"></el-option>
                    </el-select>
                    <el-select v-model="circleForm.tableName" placeholder="请选择" clearable @change="otherFormChange">
                      <el-option v-for="item in otherForm" :key="item.dictItemId" :label="item.dictItemName"
                                 :value="item.description"></el-option>
                    </el-select>
                  </el-space>
                </el-form-item>
                <el-row justify="end">
                  <el-button type="primary" @click="queryCircle">查询</el-button>
                  <el-button plain @click="closeCircleCard">关闭</el-button>
                </el-row>
              </div>
            </el-form>
          </el-card>
        </transition>
      </div>
    </transition>

    <!-- 圈选查询表格 -->
    <el-collapse-transition>
      <el-card class="circle-table" v-if="columnDataChecked.length > 0">
        <el-row :gutter="10" class="mb8" style="float:left; width: 100%;">
          <el-col :span="1.5">
            <el-button type="primary" icon="Download" @click="handleExport">下载</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" icon="Setting" @click="handleColumn">列设置</el-button>
          </el-col>
          <el-col :span="1.5" style="position: absolute;top: 0;right: 0">
            <el-button type="primary" icon="CloseBold" @click="columnDataChecked = []">关闭</el-button>
          </el-col>
        </el-row>
        <el-table v-loading="tableLoading" :data="tableData" :border="true" @selection-change="tableChange" stripe
                  max-height="300">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column v-for="(item, index) in columnDataChecked" :key="item.fieldName" :label="item.name"
                           :prop="item.fieldName" align="center" :min-width="minWidthSet(item.name)">
            <template #default="{ row }">
              <el-button v-if="/Aiid|Arwid|Acid|Arid/.test(item.fieldName)" type="text"
                         @click="getFormDetail(row)">查看</el-button>
            </template>
            <template #default="{ row }" v-if="checkDict(item.fieldName, spatialCode)">
              <dict-tag :value="row[item.fieldName]" :code="checkDict(item.fieldName, spatialCode)"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-link type="primary" :underline="false" @click="getFormDetail(row)">查看表单</el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination style="margin-top: 15px" v-show="circleForm.total > 0" :total="circleForm.total"
                    v-model:page="circleForm.page" v-model:limit="circleForm.rows" @pagination="getTableData" />
      </el-card>
    </el-collapse-transition>

    <!-- 地图 -->
    <!--    <AchievementSearchMap v-if="completeRefreshIndexMap" :allListData="allListData" @getDetailListByCode="getDetailListByCode" />-->
    <!-- 地图 -->
    <AchievementSearchSpaceDataMap v-if="completeRefreshIndexMap"
                                   :twoCheck="twoCheck"
                                   :selectSmId="selectSmId"
                                   :mapDrawType="mapDrawType"
                                   :circleForm="circleForm"
                                   :tableData="tableData"
                                   @getAllDrawGeomText="getAllDrawGeomText"
    ></AchievementSearchSpaceDataMap>
    <!-- <div style="width: 100%; height: 100%;">
      地图地图地图地图地图地图地图地图地图地图地图地图地图地图
      <div style="height: 100%">
        <el-button type="primary" style="margin: 300px 0 0 10px" @click="goToFormDetail">图层跳转表单</el-button>
      </div>
    </div> -->

    <ColumnSetting ref="columnRef" v-model:open="columnSetting.open" :title="columnSetting.title" :columnData="columnData"
                   @saveColumn="saveColumn"></ColumnSetting>
  </div>
</template>
<script setup>
import { getDict } from '@/api/system/dict'
import { getSpaceDate, getSelectionDate } from '@/api/achievementSearch/spaceData'
import { getTreeList } from '@/api/projectManage/project'
import { getProvince, getChildArea } from "@/api/system/division"
import { getField, fieldOption } from '@/api/businessManage/dataLoader/spatialData'
import ColumnSetting from '@/components/ColumnSetting'
import { checkDict } from '@/views/businessManage/common/dict'
import { minWidthSet } from '@/views/businessManage/common/minWidth'
import { getDetailId } from '@/views/businessManage/common/formDetail'
// import AchievementSearchMap from '@/map/achievementSearchMap.vue'
//地图
import AchievementSearchSpaceDataMap from '@/map/achievementSearch/index.vue';

const { proxy } = getCurrentInstance()
const router = useRouter()
// 地图
const completeRefreshIndexMap = ref(true);//防止刷新后地图不显示
const allListData = ref([]);
const showTableBool = ref(false);//是否显示表格
const tempTableListData = ref([]);//根据行政区划代码查询活动数据列表
//根据行政区划代码查询活动数据列表
const getDetailListByCode = (code) => {
  let array = [];
  let list = allListData.value;
  if (list != null && list.length > 0) {
    for (let i = 0; i < list.length; i++) {
      if (list[i].iaCode == code) {
        array.push(list[i]);
      }
    }
  }
  tempTableListData.value = array;
  showTableBool.value = true;
}
// 图层
const isShowLayer = ref(false)
const oneData = ref([])
const oneCheck = ref([])
const twoData = ref({})
const twoCheck = ref([])
const isShowQueryRang = ref(false)
const queryRang = ref({
  dates: []
})
const openLayer = () => {
  isShowLayer.value = !isShowLayer.value
  if (isShowLayer.value) {
    // isShowCircle.value = false
    isShowCircleCard.value = false
    columnDataChecked.value = []
    resetLayer()
    getProject()
    getDict('SpaceData').then(res => {
      oneData.value = res.data
    })
  }
}
const resetLayer = () => {
  oneCheck.value = []
  twoCheck.value = []
  proxy.resetForm('queryRang')
}

const oneChange = (val) => {
  Object.keys(twoData.value).map(item => {
    if(!val.includes(item)){
      delete twoData.value[item]
    }
  })

  val.map(item => {
    if(!Object.keys(twoData.value).includes(item)){
      getDict(item).then(res => {
        twoData.value[item] = res.data
      })
    }
  })

  twoCheck.value = twoCheck.value.filter(item => {
    let checkOption
    for (let key in twoData.value) {
      if (val.includes(key)) {
        if (!checkOption) {
          checkOption = twoData.value[key].find(itemOption => itemOption.dictItemCode == item)
        }
      }
    }
    return checkOption
  })
  twoChange(twoCheck.value)
}
const twoChange = (val) => {
  queryRang.value.dates = val.map(item => {
    let checkOption
    for (let key in twoData.value) {
      if (!checkOption) {
        checkOption = twoData.value[key].find(itemOption => itemOption.dictItemCode == item)
      }
    }

    return `${checkOption.dictItemCode}&${checkOption.description}&${checkOption.dictItemName}`
  })
  queryRang.value.dates.length > 0 && proxy.$refs.rangeRef.clearValidate('dates')
}


// // 二级默认全选
// watch(() => oneCheck.value, (newValue, oldValue) => {
//   if (newValue.length != oldValue.length) {
//     twoData.value = {}
//     twoCheck.value = []
//     queryRang.value.dates = []
//     newValue.map(item => {
//       getDict(item).then(res => {
//         twoData.value[item] = res.data
//         twoCheck.value.push(...res.data.map(item => item.dictItemCode))
//         queryRang.value.dates.push(...res.data.map(item => `${item.dictItemCode}&${item.description}&${item.dictItemName}`))
//         queryRang.value.dates.length > 0 && proxy.$refs.rangeRef.clearValidate('dates')
//       })
//     })
//   }
// })
// const twoChange = (val) => {
//   oneCheck.value = oneCheck.value.filter((item, index) => {
//     let curChecked = document.getElementById(item).getElementsByClassName('el-checkbox__input is-checked')
//     return curChecked.length != 0
//   })
//   console.log(val)
//   queryRang.value.dates = val.map(item => {
//     let checkOption = queryRang.value.dates.find(itemOption => itemOption.includes(item))
//     return checkOption
//   })
// }

// 项目、专题
const projectOptions = ref([])
const subjectOptions = ref([])
const projectAndSubject = ref([])
const getProject = () => {
  getTreeList().then(res => {
    projectAndSubject.value = res.data
    projectOptions.value = res.data.map(item => ({ id: item.id, name: item.name }))
  })
}
const getSubject = (val) => {
  queryRang.value.smName = ''
  circleForm.value.smId = ''
  subjectOptions.value = projectAndSubject.value.find(item => item.id == val)?.list
}
// layerData为测试用
const layerData = ref([])
const goToFormDetail = () => {
  if (layerData.value.length == 0) return
  const { code, id, smId, typeName } = layerData.value[0]
  router.push({ path: `/achievementSearch/index/${code}`, query: { id: smId, detailId: id, typeName } })
}
//选中图层查询范围的专题ID
const selectSmId = ref("");
const layerQuery = () => {
  proxy.$refs.rangeRef.validate(valid => {
    if (valid) {
      let { pmName, smName, dates } = queryRang.value
      /*getSpaceDate({ pmName, smName, codeAndName: dates.join(',') }).then(res => {
        console.log(res)
        layerData.value = res.data
      })*/
      //选中图层查询范围的专题ID
      selectSmId.value = smName;
    }
  })
}
// 圈选查询
const isShowCircle = ref(false)
const isShowCircleCard = ref(false)
const initCircleForm = () => ({ type: '0', page: 1, rows: 10, total: 0 })
const circleForm = ref(initCircleForm())
const showHideLayerDivBool = ref(false)
const showHideLegendDivBool = ref(false)
const provinceData = ref([])
const cityData = ref([])
const areaData = ref([])
const getProvinceData = () => {
  getProvince().then(res => {
    if (res.code == 200) {
      provinceData.value = res.data
    }
  })
}
const chooseProvince = (value) => {
  circleForm.value.cityId = null
  circleForm.value.countyId = null
  circleForm.value.city = null
  circleForm.value.county = null
  cityData.value = []
  areaData.value = []
  circleForm.value.province = provinceData.value.find(item => item.id == value)?.name
  getChildArea(value).then(response => {
    cityData.value = response.data
  })
}
const chooseCity = (value) => {
  circleForm.value.countyId = null
  circleForm.value.county = null
  areaData.value = []
  circleForm.value.city = cityData.value.find(item => item.id == value)?.name
  getChildArea(value).then(response => {
    areaData.value = response.data
  })
}
const chooseCounty = (value) => {
  circleForm.value.county = areaData.value.find(item => item.id == value)?.name
}
// 数据类型
const otherType = ref([])
const otherForm = ref([])
const getOtherData = () => {
  circleForm.value.status = ''
  circleForm.value.code = ''
  circleForm.value.tableName = ''
  otherType.value = []
  otherForm.value = []
  let dictCode = circleForm.value.type == '0' ? 'SpaceData' : 'Space'
  getDict(dictCode).then(res => {
    otherType.value = res.data
  })
}
const otherTypeChange = (val) => {
  circleForm.value.code = ''
  circleForm.value.tableName = ''
  getDict(val).then(res => {
    otherForm.value = res.data
  })
}
const otherFormChange = (val) => {
  circleForm.value.code = otherForm.value.find(item => item.description == val)?.dictItemCode
  spatialName.value = otherForm.value.find(item => item.description == val)?.dictItemName
  idName.value = getDetailId(circleForm.value.code)
}
// const openCircle = () => {
//   isShowCircle.value = !isShowCircle.value
//   if (isShowCircle.value) {
//     isShowLayer.value = false
//   } else {
//     isShowCircleCard.value = false
//     columnDataChecked.value = []
//   }
// }
const openCircleCard = () => {
  isShowCircleCard.value = !isShowCircleCard.value
  resetCircleCard()
  if (isShowCircleCard.value) {
    getProject()
    getProvinceData()
    getOtherData()
  } else {
    columnDataChecked.value = []
  }
}
const queryCircle = () => {
  circleForm.value.geomText = allDrawGeomText.value;
  // circleForm.value.geomText = "POLYGON((84.83789250254631 39.868162363767624,89.24414500594139 27.211912363767624,123.08789357542992 30.58691182732582,120.93164429068565 46.43066415190697,84.83789250254631 39.868162363767624))"
  proxy.$refs.circleRef.validate(valid => {
    if (valid) {
      spatialCode.value = circleForm.value.code
      getTableData()
    }
  })
}
const getTableData = () => {
  getField(circleForm.value.code).then(res => {
    columnData.value = res.data
    columnDataChecked.value = res.data.filter(item => item.status == '1')
    getSelectionDate(circleForm.value).then(res => {
      tableData.value = res.data.list
      circleForm.value.total = res.data.total
    })
  })
}
const closeCircleCard = () => {
  isShowCircleCard.value = false
  columnDataChecked.value = []
}
const resetCircleCard = () => {
  proxy.resetAllForm(circleForm.value, initCircleForm())
}
// 圈选查询表格
const tableData = ref([])
const tableLoading = ref(false)
const columnData = ref([])
const columnDataChecked = ref([])
const spatialCode = ref('')
const spatialName = ref('')

const columnSetting = reactive({
  open: false,
  title: '列设置'
})
const handleColumn = () => {
  columnSetting.title = spatialName.value
  columnSetting.open = true
}
const saveColumn = (data) => {
  fieldOption(circleForm.value.code, data).then(res => {
    proxy.$modal.msgSuccess('保存成功！')
    columnSetting.open = false
    getTableData()
  })
}
// 下载
const handleExport = () => {
  if (ids.value.length == 0) {
    proxy.$modal.msgWarning('请至少选择一条数据！')
    return
  }
  proxy.download(`/modules/${circleForm.value.code}/downLoadShp`, { ids: ids.value.join(','), typeCode: circleForm.value.code }, `${spatialName.value}.zip`)
}
// 查看表单
// code(Pt1) smId 主键id typeName
const getFormDetail = (row) => {
  router.push({ path: `/achievementSearch/index/${circleForm.value.code}`, query: { id: row.smId, detailId: row[idName.value], typeName: spatialName.value } })
}

const ids = ref([])
const idName = ref('')
const tableChange = (val) => {
  ids.value = val.map(item => item[idName.value])
}

//展开查询范围
function showQueryRangClick(){
  isShowQueryRang.value = true;
  isShowLayer.value = false;
  openLayer();
}
//收起查询范围
function closeQueryRangClick(){
  isShowQueryRang.value = false;
}
//地图圈选
const mapDrawType = ref("");//是否开启地图圈选查询类型（StopDraw关闭地图圈选 Polygon多边形绘制 Clear清空）
const isDrawQuery = ref(false);//是否开启圈选
//圈选按钮
const openDrawQuery = () => {
  isDrawQuery.value = !isDrawQuery.value;
  if(isDrawQuery.value){
    isShowLayer.value = false;
    //圈选工具--绘制多边形
    mapDrawType.value = "Polygon";
  }else{
    //圈选工具--清空
    mapDrawType.value = "Clear";
    allDrawGeomText.value = "";
    // isShowCircle.value = false;
    isShowCircleCard.value = false;
    columnDataChecked.value = [];
  }
}
// 数据查询
const showHideQuery = ref(false)
const openQuery = () => {
  showHideQuery.value = !showHideQuery.value
  openCircleCard()
}
//全部地图绘制空间数据
const allDrawGeomText = ref("");
const getAllDrawGeomText = (val)=>{
  allDrawGeomText.value = val;
  if(val){
    //显示圈选数据查询按钮
    openCircleCard();
  }
}


</script>
<style lang="scss" scoped>
.spaceData {
  position: relative;
  height: 100%;

  .operation-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    font-weight: bold;

    .el-card {
      width: fit-content;
    }

    .operation-item {
      text-align: center;
      cursor: pointer;

      &>div {
        transform: scale(1.2);
        margin: 0 0 5px 0;
      }
    }

    .operation-item:not(:last-child) {
      margin-bottom: 30px;
    }
  }

  .layer {
    position: absolute;
    top: 10px;
    left: 70px;
    z-index: 1;

    .el-divider--horizontal {
      margin: 15px 0;
    }

    .card-first {
      width: 350px;

      .queryRang {
        padding-top: 10px;
      }
    }

    .card-second {
      position: absolute;
      right: 0;
      top: 0;
      transform: translateX(calc(100% + 5px));
      width: 510px;
      max-height: 100%;
      height: 100%;

      &>:deep(.el-card__body) {
        height: 100%;
        padding: 10px 0 10px 20px !important;
      }
    }
  }

  .circle {
    position: absolute;
    top: 10px;
    left: 70px;
    z-index: 1;

    .card-circle {
      position: absolute;
      top: 10px;
      left: 0px;
      width: 600px;


      h3 {
        font-weight: bold;
        margin: 20px 20px 0;
      }

      .circle-first-form {
        padding: 20px 20px 0;
      }

      .circle-second-form {
        padding: 0 20px 20px;
      }
    }
  }

  .circle-table {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 10;
  }

  :deep(.el-space.space-width100) {
    .el-space__item {
      width: 100%;
    }
  }
}
/*图层图例*/
.new-layerLegendDiv {
  position: absolute;
  top:20px;
  left:10px;
  width: 54px;
  /*height: 220px;*/
  background: #fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
  cursor:pointer;
  z-index: 5;
}
.new-layerLegendDiv p {
  padding: 10px;
  margin:0px;
}
.new-layerLegendDiv p img {
  width:25px;
  height:25px;
  margin-left: 3px;
}
.new-layerLegendDiv p span {
  width:32px;
  height:21px;
  font-size: 14px;
  color:#3a385e;
  text-align:center;
  line-height:24px;
  border:0.5px solid #f5f5f5;
}
.new-layerLengendDiv-split {
  width: 32px!important;
  height: 1px!important;
  padding: 0px!important;
  margin: 0px!important;
  margin-left: 10px!important;
  border-top: 1px dashed #6f7ea8;
}
</style>
